<template>
    <div class="annual-project">
        <echarts :data="optionData" height="300px"></echarts>
    </div>
</template>

<script>
import Echarts from "@components/my-components/echarts.vue";

export default {
    mixins: [],
    components: {
        Echarts,
    },
    props: {
        options: {
            type: Object,
            default: (() => {})
        },
    },
    data() {
        return {};
    },
    computed: {
        optionData() {
            const colors = ["#3b68ff", "#2ec75a", "#ff8f00", "#ff5454"];
            return {
                title:{
                    show:true,
                    text:'注：项目金额指所有项目的中标金额之和，少数缺失的中标金额，用项目预算补充。',
                    left: '7%',
                    top: '85%',
                    textStyle: {
                        color: "#909399",
                        fontSize: 13,
                    },
                },
                color: colors,
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        // type: "cross",
                    },
                    formatter: function (params) {
                        let str = params[0].axisValue + "<br />";
                        params.forEach((item) => {
                            str +=
                                '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' +
                                item.color +
                                '"></span>' +
                                ' ' +
                                item.seriesName +
                                " : " + 
                                item.value +
                                (item.seriesName == "项目金额" ? " 万元 " : " 个 ") +
                                "<br />";
                        });
                        return str;
                    },
                },
                grid: {
                    right: "10%",
                },
                toolbox: {
                    
                },
                legend: {
                    data: ["项目数量", "项目金额"],
                },
                xAxis: [
                    {
                        type: "category",
                        axisTick: {
                            alignWithLabel: true,
                        },
                        // prettier-ignore
                        data: this.options.x,
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "项目数量（个）",
                        position: "left",
                        alignTicks: true,
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: colors[0],
                            },
                        },
                        axisLabel: {
                            formatter: "{value}",
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dotted',
                            }
                        },
                        axisTick:{
                            show:false // 不显示坐标轴刻度线
                        },
                    },
                    {
                        type: "value",
                        name: "项目金额（万元）",
                        position: "right",
                        alignTicks: true,
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: colors[2],
                            },
                        },
                        axisLabel: {
                            formatter: "{value}",
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dotted',
                            }
                        },
                        axisTick:{
                            show:false // 不显示坐标轴刻度线
                        },
                    },
                ],
                series: [

                    {
                        name: "项目数量",
                        type: "bar",
                        barWidth:30,
                        barMinHeight:4,
                        data: this.options.nums,
                        color:colors[0],
                    },
                    {
                        yAxisIndex: 1,
                        name: "项目金额",
                        type: "line",
                        data: this.options.price,
                        color:colors[2],
                    },
                ],
            };
        },
    },
    watch: {},
    methods: {
        int() {},
    },
    mounted() {
        this.int();
    },
};
</script>

<style lang="scss" scoped>
@import "@css/var.scss";
.annual-project {
}
</style>